<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/m_master">

<div layout:fragment="content">

    <div class="page-group">
        <div class="page page_index">
            <div th:replace="layout/m_layout::m_top_nav"></div>
            <!--s: 底部导航 -->
            <div th:replace="layout/m_layout::m_nav"></div>
            <!--e: 底部导航 -->

            <div class="page-content">

                <div class="indexheader">

                    <div class="headsearch">
                        <div class="search js-search" data-toggle="search-pop">
                            <i class="icon-bottlecms-12"></i> 搜索昵称、ID
                        </div>
                        <div class="location ellipsis js-location" data-toggle="location-pop">
                            <i class="icon-bottlecms-11"></i>
                            <span>区域</span>
                        </div>
                    </div>

                    <figure class="bcui-carousel index_banner" data-auto_play_timeout="3000">
                        <ul class="sw-slides">
                            <li class="sw-slide" th:each="item:${slide}">
                                <a class="pic" th:href="${item.url}">
                                    <img th:alt="${item.title}"
                                         th:src="${item.img}+'_800x800.jpg'"/>
                                </a>
                            </li>
                        </ul>
                    </figure>


                    <div class="headsnav">
                        <a class="item" href="/m/voice">
                            <img class="icon" src="/m/img/nav-voice.svg"/>
                            <span class="tit">声音</span>
                        </a>
                        <a class="item" href="/m/video">
                            <img class="icon" src="/m/img/nav-video.svg"/>
                            <span class="tit">视频</span>
                        </a>
                        <a class="item" href="/m/appointment">
                            <img class="icon" src="/m/img/nav-appointment.svg"/>
                            <span class="tit">约会</span>
                        </a>
                        <a class="item" href="/m/activity">
                            <img class="icon" src="/m/img/nav-activity.svg"/>
                            <span class="tit">活动</span>
                        </a>
                        <a class="item"
                           href="javascript:document.getElementsByClassName(&#039;topmenu&#039;)[0].classList.add(&#039;activate&#039;)">
                            <img class="icon" src="/m/img/nav-more.svg"/>
                            <span class="tit">更多</span>
                        </a>
                    </div>

                </div>


                <div class="icard topic">
                    <div class="titles">
                        <a href="/m/topic">
                            <!-- <div class="iconimg iconimg-topic"></div> -->
                            <img class="icon"
                                 src="/m/img/topic.svg"/>
                            <div class="">推荐话题</div>
                        </a>
                    </div>
                    <span class="ppage">
                                            <a class="item"
                                               href="https://demo.bottlecms.com/m/topic/%E5%88%9D%E6%81%8B%E7%9A%84%E6%84%9F%E8%A7%89">#初恋的感觉#</a>


                                            <a class="item"
                                               href="https://demo.bottlecms.com/m/topic/%E5%A9%9A%E5%90%8E%E4%BD%A0%E6%83%B3%E8%A6%81%E5%AD%A9%E5%AD%90%E5%90%97">#婚后你想要孩子吗#</a>


                                            <a class="item"
                                               href="https://demo.bottlecms.com/m/topic/%E5%88%9D%E6%81%8B%E6%97%B6%E4%BD%A0%E5%A4%9A%E5%A4%A7">#初恋时你多大#</a>

                                                    </span><span class="ppage">

                                            <a class="item"
                                               href="https://demo.bottlecms.com/m/topic/%E7%AB%A5%E5%B9%B4%E8%B6%A3%E4%BA%8B">#童年趣事#</a>


                                            <a class="item"
                                               href="https://demo.bottlecms.com/m/topic/%E5%B9%BB%E6%83%B3%E4%B8%AD%E7%9A%84%E6%9C%AA%E6%9D%A5">#幻想中的未来#</a>


                                            <a class="item"
                                               href="https://demo.bottlecms.com/m/topic/%E7%94%B7%E7%94%9F%E7%89%B5%E5%A5%B3%E7%94%9F%E6%89%8B%E7%AE%97%E6%98%AF%E8%A1%A8%E7%99%BD%E5%90%97">#男生牵女生手算是表白吗#</a>

                                                    </span><span class="ppage">

                                            <a class="item"
                                               href="https://demo.bottlecms.com/m/topic/%E6%80%8E%E4%B9%88%E5%92%8C%E5%88%9A%E5%8A%A0%E7%9A%84%E5%A6%B9%E5%AD%90%E8%81%8A%E5%A4%A9">#怎么和刚加的妹子聊天#</a>


                                            <a class="item"
                                               href="https://demo.bottlecms.com/m/topic/%E7%BB%93%E5%A9%9A%E5%88%B0%E5%BA%95%E8%A6%81%E4%B8%8D%E8%A6%81%E5%BD%A9%E7%A4%BC%EF%BC%8C%E8%A6%81%E5%A4%9A%E5%B0%91%E5%90%88%E9%80%82">#结婚到底要不要彩礼，要多少合适#</a>


                                            <a class="item"
                                               href="https://demo.bottlecms.com/m/topic/%E5%A5%B3%E7%94%9F30%E5%B2%81%EF%BC%8C%E8%AF%A5%E4%B8%8D%E8%AF%A5%E8%A2%AB%E5%AE%9A%E4%B9%89">#女生30岁，该不该被定义#</a>

                                                    </span><span class="ppage">

                                            <a class="item"
                                               href="https://demo.bottlecms.com/m/topic/30%E5%B2%81%E7%9A%84%E7%94%B7%E4%BA%BA%E5%B9%B4%E6%94%B6%E5%85%A5%E5%8D%81%E4%B8%87%EF%BC%8C%E4%BD%A0%E8%AE%A4%E4%B8%BA%E5%A4%B1%E8%B4%A5%E5%90%97%EF%BC%9F">#30岁的男人年收入十万，你认为失败吗？#</a>


                                    </span>
                    <a class="item refresh" href="#"><i class="icon-bottlecms-08"></i> 换一波嘛</a>
                </div>

                <div class="icard recom">
                    <div class="head">
                        <i class="icon-bottlecms-07"></i>
                        官方推荐
                    </div>
                    <div class="listsbox">
                        <div class="lists">
                            <div class="item" th:each="item:${listOfficial}">
                                <a th:href="'/m/single/info/'+${item.userId}">
                                    <div class="photo ">
                                        <img photo_mode="1"
                                             th:attr="bc-lazy-img=${item.photo}"/>
                                    </div>
                                    <div class="nickname ellipsis">
                                        <span th:text="${item.nickname}"></span>
                                        <i th:if="${item.gender eq 1}" class="sm gender_1"></i>
                                        <i th:if="${item.gender eq 2}" class="sm gender_2"></i>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="icard matching">
                    <div class="head">
                        <i class="icon-bottlecms-07"></i>
                        每日推荐
                    </div>

                    <div class="lists" th:utext="${todayData}">
                    </div>

                    <div class="foot">
                        <div class="refresh"><i class="icon-bottlecms-08 _color"></i> 换一波</div>
                    </div>

                </div>

                <div class="icard advert">
                    <div>
                        <a class="pic" href="#">
                            <img alt="中部图片"
                                 src="/m/img/55e99bb57daa8a35d866eb8f372b750f.png"/>
                        </a>
                    </div>
                </div>

                <div class="icard acticle">
                    <div class="head">
                        <i class="icon-bottlecms-07"></i>
                        脱单宝典
                    </div>
                    <div class="lists">

                        <div class="item" th:each="item:${article}">
                            <a class="external" th:href="'/m/article/info/'+${item.id}">
                                <div class="_cover cover"
                                     th:attr="bc-lazy-back=${item.cover}"></div>
                                <div class="titles ellipsis" th:text="${item.title}">
                                </div>
                                <div class="info ellipsis2" th:text="${item.summary}"></div>
                            </a>
                        </div>

                    </div>
                    <div class="foot">
                        <a href="/m/article">查看全部>></a>
                    </div>
                </div>

                <div th:replace="layout/m_layout::footer"></div>
            </div>
        </div>
    </div>


    <!-- 搜索 -->
    <div class="search-pop">
        <div class="back" data-toggle="search-pop"><i class="icon-bottlecms-100"></i></div>
        <div class="search">
            <form action="/m/single/search" method="get">
                <i class="icon-bottlecms-12"></i>
                <input type="text" name="userId" placeholder="搜索昵称、ID">
                <button type="submit">搜索</button>
            </form>
        </div>
        <div class="info">

        </div>
    </div>
    <!-- 搜索 END -->

    <!-- 城市 -->
    <div th:replace="layout/m_city"></div>
    <!-- 城市 END -->
    <div th:replace="layout/m_layout::m_top_menu"></div>
    <div th:replace="layout/m_layout::systemJs"></div>
    <script type="text/javascript">
        $(".location-pop .location .area .city").click(function (event) {
            var id = $(this).data('id');
            var val = $(this).text();
            bottlecms.cookie('city', val)
            bottlecms.cookie('city_id', id)
            $('.js-location span').text(val);
            $('.location-pop').removeClass('activate');
        });
        $(".page-content").scroll(function () {
            if ($(this).scrollTop() < 1) {
                $(".headnav").removeClass('float')
            } else {
                $(".headnav").addClass('float')
            }
        });

        // 话题
        $(".topic .refresh").on('click', function () {
            if ($('.topic .ppage').length > 1) {
                $('.topic .ppage').eq(0).remove();
            } else {
                bottlecms.toast("没有了…");
            }
        });

        // 每日推荐
        $(".matching .refresh").on('click', function () {
            if ($('.matching .lists .lpage').length > 1) {
                $('.matching .lists .lpage').eq(0).remove();
            } else {
                bottlecms.toast("没有了…");
            }
        });
        // 弹出批量打招呼
        if (!bottlecms.cookie('greet_batch')) {
            bottlecms.cookie('greet_batch', "true", {expires: 30});
            greet_batch_fun();
        }
    </script>

</div>
</html>
